<script setup lang="ts">
import { ref } from "vue";
import { link as linkData } from "../../../utils/ts/link";

const drawer = ref(false);

const link = ref(linkData);

const activeName = ref("");

// onMounted(() => {
//   console.log(link);
// })
</script>
<template>
  <div class="header-mob">
    <a href="#" target="_blank">
      <img src="/index/logo.svg" alt="" class="logo" />
    </a>
    <i @click="drawer = true" class="drawer-btn"></i>
  </div>

  <el-drawer v-model="drawer" title="I am the title" :with-header="false" size="240px" class="el-drawer-mob">
    <ul class="drawer">
      <li class="head drawerGap">
        <a href="#" target="_blank">
          <img src="/index/logo.svg" />
        </a>
        <i class="close" @click="drawer = false"></i>
      </li>
      <li v-for="(item, index) in link" :key="index">
        <el-collapse v-if="item.children" v-model="activeName">
          <el-collapse-item :title="item.name" :key="index">
            <!-- :href="child.link" -->
            <router-link v-for="(child, index) in item.children" :key="index + child.name + item.name" class="sub"
              :to="child.link">
              {{ child.name }}
            </router-link>
          </el-collapse-item>
        </el-collapse>

        <span v-else>
          <!-- <a :href="item.link">{{ item.name }}</a> -->
          <router-link :to="item.link">
            {{ item.name }}
          </router-link>
        </span>
      </li>
    </ul>
    <div class="butBox">
      <a href="#/login"><button>登录</button></a>
      <a href="#/register"><button>免费注册</button></a>
    </div>
  </el-drawer>
</template>
<style>
.el-drawer-mob .el-drawer__body {
  padding: 0px;
}
</style>
<style lang="scss" scoped>
.butBox {
  width: 100%;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;

  a {
    display: inline-block;
    width: 47%;
    height: 34px;
    background: #fff;
    color: #20a53a;
    line-height: 32px;
    font-size: 13px;
    border: 1px solid #20a53a;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  a:first-child {
    background: #20a53a;
    color: #fff;
  }
}

.drawer {
  display: flex;
  flex-direction: column;

  li {
    span a {
      display: block;
      height: 50px;
      line-height: 48px;
      padding: 0 25px;
      color: #666;
      width: 100%;
      border-bottom: 1px solid #eee;
      font-size: 15px;
    }

    :deep(.el-collapse) {
      i {
        svg {
          font-size: 20px;
        }
      }

      .el-collapse-item {
        line-height: 48px;
        color: #666;

        button {
          padding: 0 15px 0 25px;
          font-size: 15px;
        }

        .el-collapse-item__content {
          padding-bottom: 0;
        }

        .sub {
          display: block;
          height: 48px;
          width: 100%;
          line-height: 46px;
          padding: 0 25px;
          color: #444;
          font-size: 14px;
          border-top: 1px solid #eee;
        }
      }
    }
  }

  .drawerGap {
    padding: 0 15px;
    border-bottom: 1px solid #eee;
  }

  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .close {
      display: block;
      width: 60px;
      height: 60px;
      color: #222;
      text-align: center;
      line-height: 50px;
      font-size: 18px;
      background: url(/index/close_mob.png) no-repeat center;
      background-size: 30%;
      right: 0;
      top: 0;
      z-index: 99999999;
    }

    a {
      img {
        height: 30px;
      }
    }
  }
}

.header-mob {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  position: relative;
  background-color: #fff;

  .logo {
    height: 36px;
  }

  .drawer-btn {
    display: block;
    width: 60px;
    height: 60px;
    background: url(/index/fun.png) no-repeat center;
    background-size: 40%;
    color: #fff;
    text-align: center;
    line-height: 60px;
    font-size: 18px;
    position: absolute;
    right: 0;
    top: 0;
  }
}
</style>
